import { connect } from "react-redux";
import {
  useParams,
  useSearchParams,
  useNavigate,
} from "react-router-dom";
import styled from "styled-components";

import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import TextField from "@mui/material/TextField";
import React, {  useState } from "react";
import { modifyTag, removeTag } from "redux/action";
import IconSelectSection from "./IconSelectSection";
import iconHash from "Iconlibs/hash";
import { grey50 } from "material-ui/styles/colors";
import { padding } from "@mui/system";

const TagModifyPage = (props: any) => {
  const tagslist = props.tagslist;

  let params = useParams();
  let navigate = useNavigate();
  const tagName = params.tag;
  const [inputValue, setInputValue] = useState(tagName);
  const modifyTag = props.modifyTag;
  const removeTag = props.removeTag;
  const [searchParams, ] = useSearchParams();
  let eCategory = parseInt(searchParams.get("category") || "") || 0;
  let editTag = tagslist[eCategory].tags.find((tag: TagType) => {
    return tag.tagName === tagName;
  });
  const TagIconString=editTag?.TagIcon || ''
  const TagIcon =iconHash[TagIconString]
  //初始TagIcon为React.FC
  const [currentIcon, setCurrentIcon] = useState({ icon: TagIcon });
  const handleInputOnchange = (event: any) => {
    setInputValue(event.target.value);
  };
  const onIconChange = (icon: React.FC) => {
    setCurrentIcon({ icon });
  };
  //modifyTag=(tagName: string,tagIcon: React.FC,i:string,oldTagName:string)=>{
  const onSave = () => {
    console.log(tagName);
    //currentIcon.icon.name为string
    modifyTag(inputValue, currentIcon.icon.name, eCategory.toString(), tagName);
    navigate(-1);
  };
  const onRemove = () => {
    removeTag(tagName, eCategory.toString());
    navigate(-1);
  };
  const ModifyBar = (props: any) => {
    const ModifyBarWrapper = styled.div`
   
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
    `;
    return (
      <ModifyBarWrapper>
        <IconButton
          onClick={() => {
            navigate(-1);
          }}
        >
          <ArrowBackIosIcon />
        </IconButton>
        <span>编辑标签</span>
        <div>
          <Button href="#" disableRipple onClick={onRemove} >
            删除
          </Button>
          <Button onClick={onSave} disableRipple>
            保存
          </Button>
        </div>
      </ModifyBarWrapper>
    );
  };

  return (
    <div>     
      <ModifyBar />
      <TextField
       
        fullWidth
        id="standard-helperText"
        label="请输入标签名"
        helperText="标签名不能超过10位"
        variant="standard"
        onChange={handleInputOnchange}
        value={inputValue}
        sx={{margin:"0 10px"}}
      />
      <IconSelectSection value={{ Icon: TagIcon, onChange: onIconChange }} />
    </div>
  );
};

const mapStateToProps = (state: any) => {
  return { tagslist: state.tags };
};
export default connect(mapStateToProps, { modifyTag, removeTag })(
  TagModifyPage
);
